<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../assets/logo.png" alt="">
			</div>
			<!-- 登陆表单区域 -->
			<el-form ref="form" label-width="0px" class="login_form" :model="loginForm" :rules="rules">
				 <el-form-item prop="username">
						<el-input placeholder="请输入用户名" v-model="loginForm.username" prefix-icon="iconfont icon-bussiness-man-fill"></el-input>
				 </el-form-item>
				 <el-form-item  prop="password">
						<el-input placeholder="请输入密码" v-model="loginForm.password" prefix-icon="iconfont icon-unlock-fill"></el-input>
				 </el-form-item>
				 <el-form-item class="btns">
				 	<el-button type="primary" @click="login">登陆</el-button>
					<el-button type="info" @click="resetForm">重置</el-button>
				 </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				loginForm:{
					username:'admin',
					password:'123456'
				},
				rules:{
					username:[
						{require:true,message:'请输入用户名',trigger:'blur'},
						{min:3,max:10,message:'长度在3到10个字符',trigger:'blur'}
					],
					password:[
						{require:true,message:'请输入用户名',trigger:'blur'},
						{min:6,max:15,message:'长度在6到15个字符',trigger:'blur'}
					]
				}
			}
		},
		methods:{
			//重置表单
			resetForm(){
				this.$refs.form.resetFields()
			},
			//登陆
			login(){
				//预校验的element方法，参数为回调函数
				 this.$refs.form.validate(async valid => {
				          if (valid) {
				          this.$message.success("预校验成功")
						  //开始发起ajax请求，
						  const{data:res}=await this.$http.post('login',this.loginForm)
						  if(res.meta.status !==200) return this.$message.error("登陆失败了")
						  this.$message.success("登陆成功")
						  //登陆成功，就需要把用户的登陆信息存储到客户端的sessionStorage中。
						  window.sessionStorage.setItem('token',res.data.token)
						  //然后通过编程式导航跳转到主页面
						  this.$router.push('/home')
				          } 
				  });
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.login_container
		background-color #2b4b6b
		height 100%
		.login_box
			width: 450px;
			height: 300px;
			background-color: #fff;
			border-radius: 3px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			.avatar_box
				height: 130px;
				width: 130px;
				border: 1px solid #eee;
				border-radius: 50%;
				padding: 10px;
				box-shadow: 0 0 10px #ddd;
				position: absolute;
				left: 50%;
				transform: translate(-50%,-50%);
				background-color: #fff;
				img
					height: 100%;
					width: 100%;
					border-radius: 50%;
					background-color: #eee;
			.login_form
				position: absolute;
				bottom: 0;
				width: 100%;
				padding:0 20px;
				box-sizing: border-box;
				.btns
					display: flex;
					justify-content: flex-end;
</style>
